<!--
 * @Author: guandeshen 295570679@qq.com
 * @Date: 2024-08-25 09:54:45
 * @LastEditors: 关德参 2257609862@qq.com
 * @LastEditTime: 2024-09-19 17:34:30
 * @FilePath: /task-admin/src/views/project/components/SiteTable/index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by RSC, All Rights Reserved. 
-->
<template>
  <div class="content">
    <div class="table-box">
      <el-table
        :data="newSiteInfo"
        :stripe="true"
        :header-cell-style="{
          'background-color': '#F6F7F9',
          color: '#8B8B99',
        }"
        style="width: 100%"
      >
        <el-table-column
          :label="$t('common.siteName')"
          :show-overflow-tooltip="true"
          :min-width="140"
        >
          <template #default="scope">
            <span v-if="scope.row.ref">{{ scope.row.s_name }}</span>
            <el-input
              v-else
              v-model="scope.row.s_name"
              :placeholder="$t('common.pleaseEnter')"
            />
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('common.siteAddress')"
          :show-overflow-tooltip="true"
          :min-width="140"
        >
          <template #default="scope">
            <span v-if="scope.row.ref">{{ scope.row.s_address }}</span>
            <el-input
              v-else
              v-model="scope.row.s_address"
              :placeholder="$t('common.pleaseEnter')"
            />
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('common.postalCode')"
          :show-overflow-tooltip="true"
          :min-width="140"
        >
          <template #default="scope">
            <span v-if="scope.row.ref">{{ scope.row.s_postalcode }}</span>
            <el-input
              v-else
              v-model="scope.row.s_postalcode"
              :placeholder="$t('common.pleaseEnter')"
            />
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('common.startDate')"
          :show-overflow-tooltip="true"
          :min-width="140"
        >
          <template #default="scope">
            <span v-if="scope.row.ref">{{ scope.row.start_d }}</span>
            <el-date-picker
              v-else
              style="width: 140px"
              v-model="scope.row.start_d"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :placeholder="$t('common.pleaseSelect')"
            />
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('common.endDate')"
          :show-overflow-tooltip="true"
          :min-width="140"
        >
          <template #default="scope">
            <span v-if="scope.row.ref">{{ scope.row.end_d }}</span>
            <el-date-picker
              v-else
              style="width: 140px"
              v-model="scope.row.end_d"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :placeholder="$t('common.pleaseSelect')"
            />
          </template>
        </el-table-column>
        <!-- <el-table-column
          :label="$t('common.status')"
          :show-overflow-tooltip="true"
          :min-width="140"
        >
          <template #default="scope">
            <span v-if="scope.row.ref">{{
              statusOptions[scope.row.status].label
            }}</span>
            <el-select v-else v-model="scope.row.status">
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column> -->

        <el-table-column
          v-if="viewType == 2"
          :label="$t('common.operation')"
          :min-width="80"
        >
          <template #default="{ $index, row }">
            <el-button
              type="danger"
              icon="delete"
              link
              @click="handleDeleteClick($index, row)"
            >
              {{ $t("common.delete") }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span
      v-if="viewType == 2"
      class="flex-center h-42px border-rd-8px bg-#F2F3F5 text-[#323233] font-900 text-14px cursor-pointer mt-16px hover:bg-#4E6BEF hover:text-[#fff]"
      @click="handleAddClick"
      ><i-ep-plus class="close-icon mr-10px font-900" size="12px" />{{
        $t("common.add")
      }}</span
    >
  </div>
</template>

<script lang="ts" setup>
import { watchEffect } from "vue";
import type { IObject } from "@/hooks/usePage";
import { SiteInfo } from "@/api/project/model";
import SiteAPI from "@/api/site";

const props = withDefaults(
  defineProps<{
    siteInfo?: SiteInfo[] | undefined;
    viewType: number;
  }>(),
  {
    siteInfo: () => {
      return [];
    },
    viewType: 2,
  }
);
const { t } = useI18n();
// 状态
const statusOptions = ref<Options[]>([
  {
    value: 0,
    label: t("common.hide"),
  },
  {
    value: 1,
    label: t("common.show"),
  },
]);

const newSiteInfo = ref<SiteInfo[]>([]);
watchEffect(() => {
  newSiteInfo.value = props.siteInfo;
  // 这里可以执行更多响应式的副作用代码
});

// 点击删除
const handleDeleteClick = (index: number, row: SiteInfo) => {
  if (row.id == "-1") {
    newSiteInfo.value.splice(index, 1);
  } else {
    ElMessageBox.confirm(t("common.confirmDeletion"), t("common.warning"), {
      confirmButtonText: t("common.confirm"),
      cancelButtonText: t("common.cancel"),
      type: "warning",
    }).then(function () {
      SiteAPI.deleteByIds({ ids: [row.id as string] }).then(() => {
        ElMessage.success(t("common.deleteSuccessful"));
        newSiteInfo.value.splice(index, 1);
      });
    });
  }
};

const addRow = ref<SiteInfo>({
  id: "-1",
  s_name: "",
  s_address: "",
  s_postalcode: "",
  start_d: "",
  end_d: "",
  status: 1,
});

const handleAddClick = () => {
  // 点添加的时候判断当前有没有新增的行，如果有判断是否全部已经填写，没有就提示，有就把ref给个随机值，然后增加一条数据
  if (
    newSiteInfo.value.some(
      (item) =>
        item.s_name === "" ||
        item.s_address === "" ||
        item.s_postalcode === "" ||
        item.start_d === "" ||
        item.end_d === ""
    )
  ) {
    ElMessage.error(t("common.pleaseFillFirst"));
    return;
  }
  if (newSiteInfo.value.length > 0) {
    newSiteInfo.value[newSiteInfo.value.length - 1].ref =
      Math.random().toString(36);
  }
  newSiteInfo.value.push(JSON.parse(JSON.stringify(addRow.value)));
};

defineExpose({ newSiteInfo });
</script>

<style scoped>
/* @import url(); 引入公共css类 */
:deep(.table-box) {
  padding: 0 !important;
  margin-top: 0 !important;
}
</style>
